<script setup>
import { ref } from 'vue'
import {
  User,
  House,
  Goods,
  ShoppingTrolley,
  Document,
  Location
} from '@element-plus/icons-vue'
import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from 'element-plus';
import router from "@/router";
// 假设你已经定义了 logout 方法来处理用户登出
const handleCommand = (command) => {
  if (command === 'logout') {
    // 执行登出操作
    logout();
  }
};

const logout = () => {
  router.push('/home');
};

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
// 从sessionStorage获取当前登录用户的loginUser对象
const loginUser = ref(null);
if (sessionStorage.getItem('loginUser')) {
  loginUser.value = JSON.parse(sessionStorage.getItem('loginUser'));
}


</script>

<template>
  <!-- 导航栏 -->
  <el-menu
      default-active="/home/canteen/canhome"
      mode="horizontal"
      router="true"
      class="el-menu-horizontal-demo"
      :collapse="false"
      @open="handleOpen"
      @close="handleClose"
      style="background-color: darkseagreen"
  >
    <el-menu-item index="/home/canteen/canhome">
      <el-icon><House /></el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-menu-item index="/home/canteen/cart">
      <el-icon><ShoppingTrolley /></el-icon>
      <template #title>购物车</template>
    </el-menu-item>
    <el-menu-item index="/home/canteen/order">
      <el-icon><Goods /></el-icon>
      <template #title>我的订单</template>
    </el-menu-item>
    <el-menu-item index="/home/canteen/address">
      <el-icon><Location /></el-icon>
      <template #title>地址管理</template>
    </el-menu-item>
    <el-menu-item index="/home/canteen/public">
      <el-icon><Document /></el-icon>
      <template #title>公告</template>
    </el-menu-item>
    <el-menu-item index="/home/canteen/my">
      <el-icon><User /></el-icon>
      <template #title>个人信息</template>
    </el-menu-item>
    <!-- 用户名显示 -->
    <div class="user-info">
      <div class="avatar-container">
        <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </div>
      <el-dropdown class="user-dropdown" v-if="loginUser && loginUser.sname" trigger="hover" @command="handleCommand">
      <span class="el-dropdown-link">
        {{ loginUser.sname }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <template #dropdown>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-menu>

</template>

<style scoped>
.el-menu-item {
  font-size: 20px;  /* 将字体大小设置为 20 像素，您可以根据需要调整这个值 */
  margin-right: 30px;  /* 增加菜单项之间的间距 */
}

.el-menu-item:last-child {
  margin-right: 0;  /* 去除最后一个菜单项的右侧间距 */
}

.user-info {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  padding-top: 10px; /* 根据需要调整内边距 */
  margin-left: 30%;
  margin-bottom: 14px;
}

.avatar-container {
  margin-right: 10px; /* 头像和用户名之间的间距 */
}

.user-name {
  font-size: 20px;
  padding-bottom: 5px;
  /* 移除了固定的padding-left，使用flex布局来控制位置 */
}
</style>